<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>[Test] Shapes</title>
<link rel="stylesheet" href="shapes.css">
<style>
.triangles,
.circles {
    overflow: hidden;
}
.box {
    border: 1px solid #9cf;
    width: 32px;
    height: 32px;
    float: left;
    margin: 24px;
}
.list {
    list-style: none;
    margin: 24px;
    padding: 0;
}
.c2 {
    float: left;
}
</style>
</head>
<body>
    <div class="triangles">
        <div class="box">
            <div class="t1"></div>
        </div>
        <div class="box">
            <div class="t2"></div>
        </div>
        <div class="box">
            <div class="t3"></div>
        </div>
        <div class="box">
            <div class="t4"></div>
        </div>
        <div class="box">
            <div class="t5"></div>
        </div>
        <div class="box">
            <div class="t6"></div>
        </div>
        <div class="box">
            <div class="t7"></div>
        </div>
        <div class="box">
            <div class="t8"></div>
        </div>
        <div class="box">
            <div class="t9"></div>
        </div>
        <div class="box">
            <div class="t10"></div>
        </div>
        <div class="box">
            <div class="t11"></div>
        </div>
        <div class="box">
            <div class="t12"></div>
        </div>
        <div class="box">
            <div class="t13"></div>
        </div>
        <div class="box">
            <div class="t14"></div>
        </div>
        <div class="box">
            <div class="t15"></div>
        </div>
        <div class="box">
            <div class="t16"></div>
        </div>
    </div>
    <div class="circles">
        <div class="box">
            <div class="c1"></div>
        </div>
        <div class="box">
            <div class="c2"></div>
            <div class="c2"></div>
            <div class="c2"></div>
            <div class="c2"></div>
        </div>
    </div>
    <ul class="list">
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
    </ul>
</body>
</html>
